<template>
  <a-tabs style="width: 280px" size="small" lazy-load>
    <a-tab-pane key="unread">
      <template #title>
        <span>
          <icon-upload />
          导出消息<a-badge :count="exportList.length" />
        </span>
      </template>
      <a-list :bordered="false" size="small" :max-height="400">
        <a-list-item v-for="(item, index) of exportList" :key="index">
          <a-list-item-meta :title="item.title" :description="item.requestTime" />
          <template #actions>
            <a-button v-if="[3, 4].includes(item.status)" type="text" @click="download('export/file', item)">下载 </a-button>
            <a-typography-text type="danger" v-else-if="item.status == 12">
              {{ item.statusName }}
            </a-typography-text>
            <a-typography-text v-else>
              {{ item.statusName }}
            </a-typography-text>
          </template>
        </a-list-item>
      </a-list>
    </a-tab-pane>
    <a-tab-pane key="read">
      <template #title>
        <span>
          <icon-download />
          导入消息<a-badge :count="importList.length" />
        </span>
      </template>
      <a-list :bordered="false" size="small" :max-height="400">
        <a-list-item v-for="(item, index) of importList" :key="index">
          <a-list-item-meta :title="item.title" :description="item.createTime" />
          <template #actions>
            <a-space direction="vertical" size="mini" v-if="item.status == 2">
              <a-button type="text" size="mini" @click="download('import/file', item)">下载原始文件 </a-button>
              <a-button v-if="item.errorCount" type="text" status="danger" size="mini" @click="download('import/error', item)"
                >下载错误文件
              </a-button>
            </a-space>
            <!-- NEW(1, "正在导入"),
            DONE(2, "导入完成"),
            ERROR(3, "导入异常"),
            EMPTY(4, "导入数据为空"); -->
            <a-typography-text type="danger" v-else-if="item.status == 3">
              {{ item.statusName }}
            </a-typography-text>
            <a-typography-text v-else>
              {{ item.statusName }}
            </a-typography-text>
          </template>
        </a-list-item>
      </a-list>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { getImportTaskList, getDownloadTaskList } from '@/api/user'

  export default defineComponent({
    setup() {
      // 下载
      const download = (code: string, data: any) => {
        const baseUrl = import.meta.env.VITE_BASE_PATH
        // 默认导出文件
        let apiUrl = '/download/exportTaskExcel',
          type
        // 导入原始文件
        if (code == 'import/file') {
          apiUrl = '/download/importTaskFile'
          type = 1
        }
        // 导入错误文件
        else if (code == 'import/error') {
          type = 2
          apiUrl = '/download/importTaskFile'
        }
        const queryParam = `?id=${data.id}&title=${data.title}&type=${type}`
        window.open(baseUrl + apiUrl + queryParam)
      }

      // 获取列表
      const importList = ref([])
      const exportList = ref([])
      const getList = () => {
        getImportTaskList().then((res) => {
          importList.value = res.result
        })
        getDownloadTaskList().then((res) => {
          exportList.value = res.result
        })
      }
      getList()

      return {
        importList,
        exportList,
        download,
      }
    },
  })
</script>
<style lang="less" scoped>
  :deep(.arco-tabs-content) {
    padding-top: 6px !important;
  }
  :deep(.arco-list-item) {
    padding: 6px 0px 6px 4px !important;
  }
  :deep(.arco-list-item-meta-title) {
    word-break: break-all;
    margin-right: 12px;
  }
</style>
